<template>
  <el-form
        class="l-form-config"
        label-width="96px"
        label-position="left"
        size="mini"
        :model="formData"
        :rules="rules"

        ref="form"
        >
        <el-form-item v-if="!disabled" label="模板编号" prop="f_Code" >
            <el-input v-model="formData.f_Code"
                      placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item v-if="!disabled" label="模板名称" prop="f_Name" >
            <el-input v-model="formData.f_Name"
                      placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item v-if="!disabled" label="模板图标" prop="f_Icon" >
            <l-input-icon onlyFirst v-model="formData.f_Icon" ></l-input-icon>
        </el-form-item>
        <el-form-item v-if="!disabled" label="图标颜色" prop="f_Color" >
            <l-input-color v-model="formData.f_Color"
                       placeholder="请输入"></l-input-color>
        </el-form-item>
        <el-form-item v-if="!disabled" label="模板分类" prop="f_Category">
            <el-select v-model="formData.f_Category" placeholder="请选择">
                <el-option
                v-for="item in lr_dataItem['FlowSort']"
                :key="item.f_ItemValue"
                :label="item.f_ItemName"
                :value="item.f_ItemValue">
                </el-option>
            </el-select>
        </el-form-item>
        <!--<el-form-item label="任务命名规则" prop="titleRules">
            <el-input v-model="formData.titleRules" readonly="readonly"
                      placeholder="请输入任务命名规则">
                <el-button slot="append" icon="el-icon-setting" @click="handleTitleRulesClick"></el-button>
            </el-input>
        </el-form-item>-->
        <el-form-item v-if="!disabled" label="我的任务创建" prop="f_Mark">
            <l-radio  v-model="formData.f_Mark" :options="optionsNotOrOk" ></l-radio>
        </el-form-item>
        <el-form-item v-if="!disabled" label="移动端创建" prop="f_IsInApp">
            <l-radio  v-model="formData.f_IsInApp" :options="optionsNotOrOk" ></l-radio>
        </el-form-item>
        <el-form-item v-if="!disabled" prop="f_Description" label-width="0">
            <el-input type="textarea"  rows="4" v-model="formData.f_Description" placeholder="请填写备注" ></el-input>
        </el-form-item>

        <el-divider>撤销操作</el-divider>
        <div style="text-align: center;margin-bottom:16px;" >
            <el-radio-group v-model="formData.undoType" size="mini" :disabled="disabled">
                <el-radio-button label="1">执行SQL</el-radio-button>
                <el-radio-button label="2">.NET方法</el-radio-button>
                <el-radio-button label="3">第三方接口</el-radio-button>
            </el-radio-group>
        </div>
        <!--执行SQL-->
        <div v-if="formData.undoType == '1'">
            <el-form-item prop="undoDbCode" label-width="0">
                <el-select :disabled="disabled" v-model="formData.undoDbCode" placeholder="请选择执行SQL数据库">
                    <el-option-group
                    v-for="group in lr_dblinkTree"
                    :key="group.id"
                    :label="group.label">
                        <el-option
                            v-for="item in group.children"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item prop="undoDbSQL" label-width="0">
                <el-input :readonly="disabled" type="textarea" v-model="formData.undoDbSQL" rows="8" placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门" ></el-input>
            </el-form-item>
        </div>
        <!--.NET方法-->
        <div v-else-if="formData.undoType == '2'">
            <el-form-item prop="undoIOCName" label-width="0">
                <el-input :readonly="disabled" v-model="formData.undoIOCName" placeholder="请填写.NET方法IOC别名" ></el-input>
            </el-form-item>
        </div>
        <!--第三方接口-->
        <div v-else-if="formData.undoType == '3'">
            <el-form-item prop="undoUrl" label-width="0">
                <el-input :readonly="disabled" type="textarea"  rows="4" v-model="formData.undoUrl" placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门" ></el-input>
            </el-form-item>
        </div>

        <el-divider>作废操作</el-divider>
        <div style="text-align: center;margin-bottom:16px;" >
            <el-radio-group v-model="formData.deleteType" size="mini" :disabled="disabled">
                <el-radio-button label="1">执行SQL</el-radio-button>
                <el-radio-button label="2">.NET方法</el-radio-button>
                <el-radio-button label="3">第三方接口</el-radio-button>
            </el-radio-group>
        </div>
        <!--执行SQL-->
        <div v-if="formData.deleteType == '1'">
            <el-form-item prop="deleteDbCode" label-width="0">
                <el-select v-model="formData.deleteDbCode" placeholder="请选择执行SQL数据库" :disabled="disabled">
                    <el-option-group
                    v-for="group in lr_dblinkTree"
                    :key="group.id"
                    :label="group.label">
                        <el-option
                            v-for="item in group.children"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item prop="deleteDbSQL" label-width="0">
                <el-input :readonly="disabled" type="textarea" v-model="formData.deleteDbSQL" rows="8" placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门" ></el-input>
            </el-form-item>
        </div>
        <!--.NET方法-->
        <div v-else-if="formData.deleteType == '2'">
            <el-form-item prop="deleteIOCName" label-width="0">
                <el-input :readonly="disabled" v-model="formData.deleteIOCName" placeholder="请填写.NET方法IOC别名" ></el-input>
            </el-form-item>
        </div>
        <!--第三方接口-->
        <div v-else-if="formData.deleteType == '3'">
            <el-form-item prop="deleteUrl" label-width="0">
                <el-input :readonly="disabled" type="textarea"  rows="4" v-model="formData.deleteUrl" placeholder="请填写第三方接口地址(POST),JSON 格式,参数有userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门" ></el-input>
            </el-form-item>
        </div>

        <el-divider>删除草稿</el-divider>
        <div style="text-align: center;margin-bottom:16px;" >
            <el-radio-group v-model="formData.deleteDraftType" size="mini" :disabled="disabled">
                <el-radio-button label="1">执行SQL</el-radio-button>
                <el-radio-button label="2">.NET方法</el-radio-button>
                <el-radio-button label="3">第三方接口</el-radio-button>
            </el-radio-group>
        </div>
        <!--执行SQL-->
        <div v-if="formData.deleteDraftType == '1'">
            <el-form-item prop="deleteDbCode" label-width="0">
                <el-select v-model="formData.deleteDraftDbCode" placeholder="请选择执行SQL数据库" :disabled="disabled">
                    <el-option-group
                    v-for="group in lr_dblinkTree"
                    :key="group.id"
                    :label="group.label">
                        <el-option
                            v-for="item in group.children"
                            :key="item.id"
                            :label="item.label"
                            :value="item.id">
                        </el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item prop="deleteDraftDbSQL" label-width="0">
                <el-input :readonly="disabled" type="textarea" v-model="formData.deleteDraftDbSQL" rows="8" placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门" ></el-input>
            </el-form-item>
        </div>
        <!--.NET方法-->
        <div v-else-if="formData.deleteDraftType == '2'">
            <el-form-item prop="deleteDraftIOCName" label-width="0">
                <el-input :readonly="disabled" v-model="formData.deleteDraftIOCName" placeholder="请填写.NET方法IOC别名" ></el-input>
            </el-form-item>
        </div>
        <!--第三方接口-->
        <div v-else-if="formData.deleteDraftType == '3'">
            <el-form-item prop="deleteDraftUrl" label-width="0">
                <el-input :readonly="disabled" type="textarea"  rows="4" v-model="formData.deleteDraftUrl" placeholder="请填写第三方接口地址(POST),JSON 格式,参数有userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门" ></el-input>
            </el-form-item>
        </div>


        <l-dialog
            :title="$t('流程任务命名规则配置')"
            :visible.sync="titleRulesVisible"
            :height="480"
            width="600px"
            >
            <div class="l-rblock" style="padding:8px" >
                <el-alert
                    :title="titleRules"
                    type="info"
                    :closable="false"

                    v-if="!$validatenull(titleRules)"
                    >
                </el-alert>
                <draggable
                        :list="titleRulesList"
                        :group="{ name: 'dic' }"
                        ghost-class="set-item-ghost"
                        handle=".l-drag-item">
                        <div v-for="(item, index) in titleRulesList"
                            class="l-set-item" 
                            :key="index">
                            <i class="l-drag-item el-icon-rank"></i>
                            <l-select style="width:26%;margin-right:1%;"
                                size="mini"
                                v-model="item.F_FiledValueType"
                                :placeholder="$t('字段值类型')"
                                :options="vTypeOptions"

                                @change="handleChangeVType(item)"
                                >
                            </l-select>
                            <el-input
                                :readonly="item.F_FiledValueType != 1 && item.F_FiledValueType != 10 "
                                style="width:26%;"
                                size="mini"
                                v-model="item.F_FiledValue"
                                placeholder="字段值"></el-input>
                            <el-button 
                                @click="handleRemoveConditions(index)"
                                circle
                                plain
                                type="danger"
                                size="mini"
                                icon="el-icon-minus"
                                class="l-delete-item"
                                style="padding: 4px;"></el-button>
                        </div>
                </draggable>
                <div style="padding-left:22px;" >
                    <el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleAddTitleRulesList"  >添加流程任务命名规则配置</el-button>
                </div>
            </div>
            
        </l-dialog>

    </el-form>
</template>

<script>
export default {
    name: 'shcemeinfo-config',
    props:{
        disabled:{
            type:Boolean,
            default:false
        }
    },
    data () {
        return {
            optionsNotOrOk:[{label:'允许',value:1},{label:'不允许',value:2}],
            formData:{
                f_Code:'',
                f_Name:'',
                f_Category:'',
                f_Mark:1,
                f_IsInApp:2,
                f_Description:'',

                titleRules:'',

                undoType:1,
                undoDbCode:'',
                undoDbSQL:'',
                undoIOCName:'',
                undoUrl:'',

                deleteType:1,
                deleteDbCode:'',
                deleteDbSQL:'',
                deleteIOCName:'',
                deleteUrl:'',

                deleteDraftType:1,
                deleteDraftDbCode:'',
                deleteDraftDbSQL:'',
                deleteDraftIOCName:'',
                deleteDraftUrl:'',

                f_Icon:'learun-icon-stars',
                f_Color:'#409EFF',

                
            },
            rules:{
                f_Code: [
                    { required: true, message: '请输入模板编号' },
                    { validator: this.lr_existDbFiled,keyValue:() => { return this.formData.f_Id },tableName:'lr_wf_schemeinfo',keyName:'f_Id',trigger: 'blur'}
                ],
                f_Name: [
                    { required: true, message: '请输入模板名称' }
                ],
                f_Category: [
                    { required: true, message: '请选择模板分类' }
                ],
                f_Icon: [
                    { required: true, message: '请选择图标' }
                ],
                f_Color: [
                    { required: true, message: '请选择颜色' }
                ],
            },
            titleRulesVisible:false,
            titleRules:'',
            titleRulesList:[]
        }
    },
    computed: {
        
    },
    created () {
        this.lr_loadDblink()
    },
    methods: {
        handleTitleRulesClick(){
            this.titleRulesVisible = true;
        },
        handleAddTitleRulesList(){
            this.titleRulesList.push({type:1,value:''});
        },
        handleRemoveConditions(){
            
        },

        resetForm(){
            this.formData.f_Id = ''
            this.formData.f_SchemeId = ''
            this.$refs.form && this.$refs.form.resetFields()
        },
        // 校验表单
        validateForm(){
            return new Promise((resolve) => {
                this.$refs.form.validate((valid) => {
                    resolve(valid)
                })
            })
        },
        setForm(data){
            this.formData = data
        },
        getForm(){
            return this.$deepClone(this.formData)
        }
    }
}
</script>

